
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>像素跑酷小游戏</title>

  <style>

    body {

      margin: 0;

      overflow: hidden;

      font-family: Arial, sans-serif;

    }

    canvas {

      display: block;

      background: #87CEEB; /* 天空蓝 */

    }

  </style>

</head>

<body>

  <canvas id="gameCanvas"></canvas>

  <script>

    const canvas = document.getElementById('gameCanvas');

    const ctx = canvas.getContext('2d');



    // 设置画布宽高

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;



    const player = {

      x: 50,

      y: canvas.height - 150,

      width: 50,

      height: 50,

      color: 'red',

      dy: 0,

      jumpForce: 15,

      gravity: 1,

      isJumping: false,

    };



    const obstacle = {

      x: canvas.width,

      y: canvas.height - 100,

      width: 50,

      height: 50,

      color: 'green',

      speed: 5,

    };



    let score = 0;

    let gameOver = false;



    function drawPlayer() {

      ctx.fillStyle = player.color;

      ctx.fillRect(player.x, player.y, player.width, player.height);

    }



    function drawObstacle() {

      ctx.fillStyle = obstacle.color;

      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

    }



    function displayScore() {

      ctx.fillStyle = 'black';

      ctx.font = '24px Arial';

      ctx.fillText(`得分: ${score}`, 20, 40);

    }



    function resetGame() {

      player.y = canvas.height - 150;

      player.dy = 0;

      obstacle.x = canvas.width;

      score = 0;

      gameOver = false;

    }



    function gameLoop() {

      if (gameOver) {

        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = 'white';

        ctx.font = '48px Arial';

        ctx.textAlign = 'center';

        ctx.fillText('游戏结束！按空格键重新开始', canvas.width / 2, canvas.height / 2);

        return;

      }



      ctx.clearRect(0, 0, canvas.width, canvas.height);



      // 画角色和障碍物

      drawPlayer();

      drawObstacle();

      displayScore();



      // 重力效果

      player.y += player.dy;

      if (player.y + player.height < canvas.height) {

        player.dy += player.gravity;

      } else {

        player.isJumping = false;

        player.dy = 0;

        player.y = canvas.height - player.height;

      }



      // 障碍物移动

      obstacle.x -= obstacle.speed;

      if (obstacle.x + obstacle.width < 0) {

        obstacle.x = canvas.width;

        score++;

      }



      // 碰撞检测

      if (

        player.x < obstacle.x + obstacle.width &&

        player.x + player.width > obstacle.x &&

        player.y < obstacle.y + obstacle.height &&

        player.y + player.height > obstacle.y

      ) {

        gameOver = true;

      }



      requestAnimationFrame(gameLoop);

    }



    // 键盘控制

    window.addEventListener('keydown', (e) => {

      if (e.code === 'Space') {

        if (gameOver) {

          resetGame();

          gameLoop();

        } else if (!player.isJumping) {

          player.isJumping = true;

          player.dy = -player.jumpForce;

        }

      }

    });



    gameLoop();

  </script>

</body>

</html>

